<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>宣传推广</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/swiper.min.css">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-base.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-mhqy.css">


</head>
<body style="padding: 20px">

<div style="padding: 35px">
    <div class="block_title">辖区服务动态</div>
    <div class="materials_list">
        <p>如何线上推广引流：<span>点击生成微信专用活动二维码，可直接下载二维码转发，或使用微信扫码打开活动页面再转发</span></p>
        <p>如何线下推广引流：<span>点击生成线下海报高清图片，直接下载打印张贴，也可通过微信转发，但引流算作线下引流</span></p>
    </div>
    <hr style="background: #e5e5e5;height: 1px;border: none;margin: 40px auto">

    <div class="enrollment_activity">
        <div class="swiper-container video-swiper" >
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="video_item">
                        <h3>报读活动 1</h3>
                        <img  class="hb_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_21.png" alt="">
                        <div class="model_img">
                            <a href="javascript:;" class="ewm_out"><img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_18.png" alt=""></a>
                            <img class="ewm_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_15.jpg" alt="">

                            <a href="javascript:;" class="dow_img">下载二维码</a>
                        </div>
                        <div class="tab_text_list">
                            <div class="text_list">
                                <div class="item_text">线上引流：230</div>
                                <div class="item_text">线下引流：230</div>
                            </div>
                            <button>生成微信专用活动二维码</button>
                            <button>生成微信专用活动二维码</button>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="video_item">
                        <h3>报读活动 1</h3>
                        <img  class="hb_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_21.png" alt="">
                        <div class="model_img">
                            <a href="javascript:;" class="ewm_out"><img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_18.png" alt=""></a>
                            <img class="ewm_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_15.jpg" alt="">

                            <a href="javascript:;" class="dow_img">下载二维码</a>
                        </div>
                        <div class="tab_text_list">
                            <div class="text_list">
                                <div class="item_text">线上引流：230</div>
                                <div class="item_text">线下引流：230</div>
                            </div>
                            <button>生成微信专用活动二维码</button>
                            <button>生成微信专用活动二维码</button>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="video_item">
                        <h3>报读活动 1</h3>
                        <img  class="hb_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_21.png" alt="">
                        <div class="model_img">
                            <a href="javascript:;" class="ewm_out"><img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_18.png" alt=""></a>
                            <img class="ewm_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_15.jpg" alt="">

                            <a href="javascript:;" class="dow_img">下载二维码</a>
                        </div>
                        <div class="tab_text_list">
                            <div class="text_list">
                                <div class="item_text">线上引流：230</div>
                                <div class="item_text">线下引流：230</div>
                            </div>
                            <button>生成微信专用活动二维码</button>
                            <button>生成微信专用活动二维码</button>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="video_item">
                        <h3>报读活动 1</h3>
                        <img  class="hb_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_21.png" alt="">
                        <div class="model_img">
                            <a href="javascript:;" class="ewm_out"><img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_18.png" alt=""></a>
                            <img class="ewm_img" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_15.jpg" alt="">

                            <a href="javascript:;" class="dow_img">下载二维码</a>
                        </div>
                        <div class="tab_text_list">
                            <div class="text_list">
                                <div class="item_text">线上引流：230</div>
                                <div class="item_text">线下引流：230</div>
                            </div>
                            <button>生成微信专用活动二维码</button>
                            <button>生成微信专用活动二维码</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

    <div class="block_title">宣传推广数据跟踪</div>
    <div class="share_time_select_body">
        <select class="share_time_select" name="" id="">
            <option value="">请选择日期</option>
        </select>
        <select class="share_time_select" name="" id="">
            <option value="">请选择日期</option>
        </select>
    </div>
    <div id="Personal_mrcd" style="width: 100%;height:440px;"></div>
    <div class="view_btn">
        <button>▶ 查看引流数据</button>
    </div>
</div>


<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/swiper.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/echarts.min.js"></script>
<script>
  new Swiper('.video-swiper', {
    slidesPerView : 3,
    spaceBetween : 20,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });


  var Personal = echarts.init(document.getElementById('Personal_mrcd'));
  $(function () {
    $(".video-swiper").on("click","button",function () {
      $(this).parents('.video_item').find('.model_img').show() ;
    })
    $(".video-swiper").on("click",".ewm_out",function () {
      $(this).parent('.model_img').hide() ;
    })


    window.addEventListener("resize", function () {
      Personal.resize();
    });


    var colors = ['#009C9A', '#5EE0F4', '#FF9BA8'];


    option = {
      color: colors,

      tooltip: {
        trigger: 'axis',
      },
      legend: {
        x : 'center',
        y : 'bottom',
        data:['线上引流', '线下引流']
      },
      grid: {
        top: 10,
        bottom: 70
      },
      xAxis: [
        {
          data: ["0", "5", "10", "15", "20", "25", "30"]
        }
      ],
      yAxis: [
        {
          type: 'value',
          position: 'left',
          min: 0,
          axisLine: {
            lineStyle: {
              color: "#999999"
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name:'线上引流',
          type:'line',
          smooth: true,
          data: [5, 45, 34, 23, 12, 483, 134]
        },
        {
          name:'线下引流',
          type:'line',
          smooth: true,
          data: [39, 59, 31, 187, 483, 692, 131]
        }
      ]
    };


    // 使用刚指定的配置项和数据显示图表。
    Personal.setOption(option);
  })
</script>
</body>
</html>
